///////甘特图
<template>
    <div :style="{ height: chartHeight + 'px', width: chartWidth + 'px' }" ref="chart"></div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import * as echarts from 'echarts';

let chartHeight = ref(400); // 默认高度
let chartWidth = ref(800); // 默认宽度
let receivedProps = defineProps(['chartHeight', 'chartWidth', 'chartCategories', 'chartData']);

if (receivedProps.chartHeight) {
    chartHeight.value = receivedProps.chartHeight;
}
if (receivedProps.chartWidth) {
    chartWidth.value = receivedProps.chartWidth;
}

const chart = ref(null);
let categories = receivedProps.chartCategories;

let data = receivedProps.chartData;
// [
//     {
//         name: 'Task A1',
//         value: [0, Date.parse('2024-01-01'), Date.parse('2024-01-15'), 14],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task A1',
//         value: [0, Date.parse('2024-01-20'), Date.parse('2024-01-31'), 11],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task B1',
//         value: [1, Date.parse('2024-01-05'), Date.parse('2024-01-25'), 20],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task B2',
//         value: [1, Date.parse('2024-02-11'), Date.parse('2024-02-25'), 14],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task C1',
//         value: [2, Date.parse('2024-02-20'), Date.parse('2024-03-15'), 23],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task C2',
//         value: [2, Date.parse('2024-03-20'), Date.parse('2024-03-31'), 11],
//         itemStyle: { color: '#72b362' }
//     },
//     {
//         name: 'Task C2',
//         value: [2, Date.parse('2024-04-20'), Date.parse('2024-04-30'), 11],
//         itemStyle: { color: '#72b362' }
//     }
// ];

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;
    var rectShape = echarts.graphic.clipRectByRect(
        {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        },
        {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        }
    );
    return (
        rectShape && {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: {
                fill: api.visual('color')
            }
        }
    );
}

/* 初始化图表 */
function initChart() {
    let myChart = echarts.init(chart.value);
    // 计算最小和最大日期
    const minDate = Math.min(...data.map(item => item.value[1]));
    const maxDate = Math.max(...data.map(item => item.value[2]));
    const option = {
        tooltip: {
            formatter: function (params) {
                return params.name
                    + '：<br/>开始日期：' + new Date(params.value[1]).toLocaleDateString()
                    + '<br/>结束日期：' + new Date(params.value[2]).toLocaleDateString()
            }
        },
        // title: {
        //     text: '甘特图',
        //     left: 'center'
        // },
        dataZoom: [
            {
                type: 'slider',
                filterMode: 'none',
                showDataShadow: true,
                top: chartHeight.value - 50,
                labelFormatter: '',
                // zoomLock:true
                // minValueSpan:3600 * 24 * 1000 * 20,
                // maxValueSpan:3600 * 24 * 1000 * 20,
                // interval: 24 * 3600 * 1000 * 10
            },
            {
                type: 'inside',
                filterMode: 'none'
            }
        ],
        grid: {
            height: chartHeight.value - 150
        },
        xAxis: {
            type: 'time', // 设置为时间类型
            min: new Date(minDate).toLocaleDateString(), // 设置最小日期
            max: new Date(maxDate).toLocaleDateString(), // 设置最大日期
            axisLabel: {
                formatter: function (val) {
                    return new Date(val).toLocaleDateString(); // 格式化时间为日期
                },
                interval: 24 * 3600 * 1000 * 20 // 每隔两天显示一个标签（可以根据需要调整）
            }
        },
        yAxis: {
            type: 'category',
            data: categories
        },
        series: [
            {
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            }
        ]
    };
    myChart.setOption(option);
}

onMounted(() => {
    initChart();
});
</script>
